<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1{
				width: 500px;
				height: 500px;
				background-color: black;
			}
			#div2{
				width: 400px;
				height: 400px;
				background-color: yellow;
			}
			#div3{
				width: 300px;
				height: 300px;
				background-color: green;
			}
			#div4{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			div {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
			
					}
		</style>
	</head>
	<!-- /*4.制作4个嵌套DIV ，要求：
			      1.每个父DIV尺寸必须大于子DIV
			      2.实现每个DIV在父DIV正中间
			      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
			      4.通过最底层DIV，打印每层父DIV，如：
				1级父元素为（），1级父节点为（）
				2级父元素为（），2级父节点为（）*/ -->
	<body>
		<div id="div1" >
			父1
			<div id="div2" >
				父2
				<div id="div3" >
					父3
					<div id="div4" >
						父4
					</div>
				</div>
			</div>
		</div>
		<button type="button" onclick="father()">父</button>
		<button type="button" onclick="son()">子</button>
	</body>
	<script type="text/javascript">
		function father(){
			console.log('1级父元素为：');
						console.log(document.getElementById('div4').parentElement);
						console.log('1级父节点为：');         
						console.log(document.getElementById('div4').parentNode);
						console.log('2级父元素为：');         
						console.log(document.getElementById('div4').parentElement.parentElement);
						console.log('2级父节点为：');         
						console.log(document.getElementById('div4').parentNode.parentNode);
						console.log('3级父元素为：');         
						console.log(document.getElementById('div4').parentElement.parentElement.parentElement);
						console.log('3级父节点为：');         
						console.log(document.getElementById('div4').parentNode.parentNode.parentNode);
		}
		function son(){
			console.log('1级子元素为：');
						console.log(document.getElementById('div1').children);
						console.log('1级子节点为：');         
						console.log(document.getElementById('div1').childNodes);
						console.log('2级子元素为：');         
						console.log(document.getElementById('div2').children);
						console.log('2级子节点为：');         
						console.log(document.getElementById('div2').childNodes);
						console.log('3级子元素为：');         
						console.log(document.getElementById('div3').children);
						console.log('3级子节点为：');         
						console.log(document.getElementById('div3').childNodes);
		}
	</script>
</html>
